<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>组件的嵌套</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <h1>{{msg}}</h1>
      <!-- 只需引入统一管理的组件，如果不想在这里写，可以在VM中通过template -->
      <!--  <app></app> -->
    </div>
  </body>

  <script type="text/javascript">
    //1：创建一个子组件，子组件要在使用之前创建好
    const student = {
      template: `
        <div>
          <h2>学生姓名: {{studentName}}</h2>
          <h2>学生年龄: {{age}}</h2>
        </div>
      `,
      data() {
        return {
          studentName: "里斯",
          age: 18,
        };
      },
    };

    //2：声明一个父组件
    const school = Vue.extend({
      template: `
        <div>
          <h2>学校名称: {{schoolName}}</h2>
          <h2>学校地址: {{address}}</h2>
          <student></student>
        </div>
      `,
      data() {
        return {
          schoolName: "尚硅谷",
          address: "北京",
        };
      },
      //父组件中注册子组件，注意先后顺序
      //注册后只能在当前父组件的模板中，作为标签使用
      components: {
        student,
      },
    });

    //定义一个Hello组件，和学校同级
    const hello = {
      template: `
        <div>
          <hr/>
          <h1>提示信息: {{msg}}</h1>
          <hr/>
        </div>
      `,
      data() {
        return {
          msg: "欢饮来到尚硅谷",
        };
      },
    };

    //定义一个app组件，用于VM管理所有组件
    const app = {
      template: `
        <div>
          <hello></hello>
          <school></school>
        </div>
      `,
      //注册所有组件
      components: {
        school,
        hello,
      },
    };

    //3：局部注册组件
    new Vue({
      el: "#root",
      data: {
        msg: "欢迎学习Vue",
      },
      components: {
        //只需要引入统一管理的组件
        app,
      },
      template: `<app></app>`,
    });
  </script>
</html>
